<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>我的文章</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
body{
    background: #F5F7F8;
}
.right-icon{
  position: relative;
}
.right-icon span img{
    width: 1rem;
    height: 1rem;
    display: inline-block;
}
.aui-badge{
  width: 0.6rem;
  height: 0.6rem;
  line-height: 0.6rem;
  font-size:0.5rem;
  border-radius: 50%;
  background: #E73350 !important;
  left:14%;
}

element.style {
}
.aui-badge {
    min-width: 0.6rem;
    height: 0.6rem;
    line-height: 0.65rem;
    padding: 0;
    font-size: 0.5rem;
    background-color: #E73350;
    border-radius: 50%;
    top: 0.25rem;
    left: 17%;
}
.aui-bar.aui-bar-light{
    background-image: none !important;
}
.conTop{
    color:#333;
    padding: 0.7rem 0.8rem 0.7rem 1.5rem;
}
.conTop p{
    color:#333333;
}
.conTop ul li>img{
    width: 3.2rem;
    height: 3.2rem;
    border: 1px solid #000;
    border-radius: 50%;
    margin-top: 0.4rem;
}
.numBold{
    font-size:1.2rem;
    color:#333;
    font-weight: bold;
}
/*修改aui默认样式*/
.aui-tab{
    box-shadow: none;
    -moz-box-shadow: none;/* 老的 Firefox */
    padding: 0 0.2rem;
}
.aui-tab .aui-tab-item {
    font-size: 0.6rem;
    height: 1.8rem;
    line-height: 1.8rem;
    position: relative;
}
.pt-8{
  padding-top: 0.4rem;
}
.nameLike{
  padding-top: 0.4rem;
}
.nameLike .follow{
  width: 4rem;
  height: 1.2rem;
  line-height: 1.2rem;
  background: #E73350;
  font-size:0.6rem;
  border-radius: 5rem;
  text-align: center;
  color:#fff;
}
.text-bold{
  font-weight: bold;
}
.disbale{
  background: #ccc !important;
}
</style>
</head>

<body>
	<header class="aui-bar aui-bar-nav aui-bar-light" id="header">
        <div class="aui-pull-left back" tapmode onclick="api.closeWin()"></div>
        <div class="aui-title"></div>
        <div class="aui-pull-right right-icon">
            <span class="draft" tapmode onClick="openWin('my_draft_win')" style="padding-right:0.4rem"><img src="../../image/common/26.png" alt=""><div class="aui-badge">0</div></span>
            <span tapmode onclick="openShare()"><img src="../../image/common/27.png" alt=""></span>
        </div>
    </header>
    <div class="aui-content bg-white" id="conTop">
        <div class="conTop">
            <ul class="aui-flex-col aui-flex-between aui-flex-middle">
                <li>
                    <img class="img" src="../../image/demo/02.jpg" alt="">
                    <p class="aui-font-size-14 aui-text-center text-bold pt-8">Fireart</p>
                </li>
                <li tapmode onclick="openWin('follow_win')">
                    <p class="numBold">60</p>
                    <p class="aui-font-size-12 text">关注</p>
                </li>
                <li tapmode onclick="openWin('fans_win')">
                    <p class="numBold">5137</p>
                    <p class="aui-font-size-12 text">粉丝</p>
                </li>
                <li>
                    <p class="numBold">6.4万</p>
                    <p class="aui-font-size-12">获赞</p>
                </li>
            </ul>
            <div class="nameLike aui-flex-col aui-flex-between">
              <div class="aui-font-size-14 color-333 text-bold">KEELY 霏霏</div>
              <div></div>
              <div class="follow" tapmode onclick="follow(this)">+关注</div>
            </div>
        </div>
        <div class="aui-tab" id="type-tab">
            <div class="aui-tab-item aui-active" tapmode onClick="openNews(0);"><span class="my">我</span>的文章<span class="aui-padded-l-5">198</span></div>
            <div class="aui-tab-item" tapmode onClick="openNews(1);"><span class="my">我</span>的收藏<span class="aui-padded-l-5">56</span></div>
            <div class="aui-tab-item" tapmode onClick="openNews(2);"><span class="my">我</span>的推荐<span class="aui-padded-l-5">32</span></div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
    var contopH;
    apiready = function() {
        api.parseTapmode();
		    var header = $api.byId('header');
        $api.fixStatusBar(header);
        var headerH = $api.offset(header).h;
        var contop = $api.byId('conTop');
        $api.fixStatusBar(contop);
        contopH = $api.offset(contop).h;
        var name = api.pageParam.name;
        if(name == 'my'){
          $$('.nameLike').addClass('aui-hide')
          contopH = $api.offset(contop).h;
          $$('.my').text('我');
        }else{
          $$('.my').text('Ta');
          $$('.draft').addClass('aui-hide')
        }
        api.openFrame({
            name: 'article_frm',
            url: 'article_frm.html',
            rect: {
                x: 0,
                y: headerH + contopH,
                w: 'auto',
                h: 'auto'
            },
            pageParam: api.pageParam
        });

    };
    function openShare(){
      api.openFrame({
        name:'share_mask',
        url:'../share_mask.html',
        rect:{
          x:'auto',
          y: 'auto',
          w: api.winWidth,
          h: api.winHeight
        },
        bounces: false,
      })
  }
function openNews(ind) {
    $$('#type-tab > div').removeClass('aui-active').eq(ind).addClass('aui-active');
}
function follow(el){
    var text = $$(el).text();
    if(text == '+关注'){
      $$(el).text('已关注');
      $$(el).addClass('disbale')
    }else{
      $$(el).text('+关注');
      $$(el).removeClass('disbale')
    }
  }
  function openWin(url){
    api.openWin({
        name: url,
        url: url + '.html',
        pageParam: {
            name: api.pageParam.name,
            fans: 'fans'
        }
    });
  }
</script>
</html>
